<template>
  <section class="home-container" id="home">
    <Intro @mose="scrollToSection1" />
    <section class="main-warp" id="about">
      <section class="banner">
        <img
          class="banner-cover"
          alt="banner"
          src='../../assets/wrapper/Karina5.png'
        />
        <div class="banner-content">
          <div class="banner-container">
            <div class="row">
              <div class="row-col-left"></div>
              <div class="row-col-right">
                <div
                  class="banner-text"
                  :style="`transform: translateX(-${
                    state.titleAnimation ? 0 : 50
                  }%)`"
                >
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="main-container">
        <div class="container-row">
          <div class="container-left">
            <div
              class="sidebar"
              :style="`transform: translateY(-${
                state.titleAnimation ? 40 : 0
              }%)`"
            >
              <div class="sidebar-card">
                <div class="sidebar-avatar">
                  <!-- 大头照 以及个人信息-->
                  <img
                    class="avatar-img lazy-image"
                    :data-src="setting.websiteInfo.avatar"
                  />
                </div>
                <div class="sidebar-name">
                  {{ setting.websiteInfo.occupation }}
                </div>
                <div class="sidebar-label">
                  {{ setting.websiteInfo.occupationEn }}
                </div>
                <div class="c-divider c-mb-40"></div>
                <div class="sidebar-social">
                  <a :href="setting.userInfo.github" target="_blank"
                    ><i class="iconfont icon-github"></i
                  ></a>
                  <a :href="setting.userInfo.gitee" target="_blank"
                    ><i class="iconfont icon-gitee"></i
                  ></a>
                </div>
                <div class="c-divider c-mb-40 c-mt-40"></div>
                <ul class="sidebar-other">
                  <li class="other-item">
                    <span class="item-label">城市：</span>
                    <span class="item-label-light">{{
                      setting.userInfo.city || "-"
                    }}</span>
                  </li>
                  <li class="other-item">
                    <span class="item-label">年龄：</span>
                    <span class="item-label-light">{{
                      setting.userInfo.age
                    }}</span>
                  </li>

                  <li class="other-item">
                    <span class="item-label">微信/QQ：</span>
                  </li>
                  <div class="social">
                    <img
                      width="80"
                      class="lazy-image"
                      :data-src="setting.userInfo.wx"
                    />
                    <img
                      width="80"
                      class="lazy-image"
                      :data-src="setting.userInfo.qq"
                    />
                  </div>
                </ul>
                <div class="c-divider c-mb-40"></div>

                <div class="sidebar-btn" @click="scrollToSection1('contact')">
                  <span>在线留言</span>

                </div>

              </div>
            </div>
          </div>
          <div class="container-right">
            <div class="container-right-content">
              <div class="brand-card-list">
                <div class="brand-card-item">
                  <div class="card-item">
                    <h3 class="card-item-title">Vue&Node</h3>
                    <div class="c-divider"></div>
                    <div class="card-item-content">语言框架</div>
                  </div>
                </div>

                <div class="brand-card-item">
                  <div class="card-item">
                    <h3 class="card-item-title">3+</h3>
                    <div class="c-divider"></div>
                    <div class="card-item-content">实战经验</div>
                  </div>
                </div>

                <div class="brand-card-item">
                  <div class="card-item">
                    <h3 class="card-item-title">20+</h3>
                    <div class="c-divider"></div>
                    <div class="card-item-content">项目合作</div>
                  </div>
                </div>
                <!-- list 结束 -->
              </div>
              <section class="notice">
                <div class="notice-line">
                  <span class="notice-title">📢 欢迎：</span>
                  <div class="notice-desc">
                    {{ setting.websiteInfo.notice || "-" }}
                  </div>
                </div>
              </section>
              <section class="brand-tips">
                <FanSectionHeader title="Tips" titleNum="01" />
                <blockquote class="my-story">
                  老师 我在B站背八股文
                  <br />
                  把小脑背坏了，能教我开发功法吗。
                  <img
                    class="wx-logo lazy-image"
                    width="120"
                    :data-src="setting.websiteInfo.karina1"
                  />
                </blockquote>
              </section>
            </div>
          </div>
        </div>
        <section class="notice notice-temp c-mb-40">
          <div class="notice-line">
            <span class="notice-title">公告：</span>
            <div class="notice-desc">
              {{ setting.websiteInfo.notice || "-" }}
            </div>
          </div>
        </section>
        <!-- Wrapper 移动点击 桌面hover -->
        <section class="about Karina-wrapper">
          <FanSectionHeader title="I'M Her Fan" titleNum="02" />
          <ImgKarina />
        </section>

        <section class="about">
          <FanSectionHeader title="About me" titleNum="03" />
          <section class="animate-me">
            "<span class="me-text me-text-a">2024年</span>，我踏上了<span
              class="me-text me-text-b"
              >Front</span
            >的不归路 ，从那时起，对技术<span class="me-text me-text-c"
              >充满不了一点热情</span
            >， 看到构建各种<span class="me-text me-text-d">响应式</span
            >设计和<span class="me-text me-text-c">移动端</span
            >的开发。我就头皮发麻
            <span class="me-text me-text-e">什么都不喜欢用户体验</span
            >、界面设计和<span class="me-text me-text-a">代码质量</span
            >，什么都不具有<span class="me-text me-text-c">优化性能</span
            >和解决兼容性问题的经验。 但愿<span class="me-text me-text-c"
              >下辈子</span
            >别踏入 <span class="me-text me-text-c">IT</span>这条不归路<span
              class="me-text me-text-c"
              >嘤嘤嘤</span
            >
          </section>
        </section>
        <section class="resume c-mt-40" id="resume">
          <FanSectionHeader title="RESUME" titleNum="04" />
          <div class="resume-box skill-box">
            <div class="box-title">
              <span class="title-icon iconfont icon-Elephone_repair"> </span>
              <span class="text">SKILLS</span>
            </div>
            <div class="box-item">
              <ul>
                <li><i class="icon iconfont icon-icon"></i>三件套</li>
                <li><i class="icon iconfont icon-icon"></i>Electron</li>
                <li><i class="icon iconfont icon-icon"></i>SCSS/Less</li>
                <li><i class="icon iconfont icon-icon"></i>JavaScript</li>
                <li><i class="icon iconfont icon-icon"></i>TypeScript</li>
              </ul>
            </div>
            <div class="box-item">
              <ul>
                <li><i class="icon iconfont icon-icon"></i>Vue.js</li>
                <li><i class="icon iconfont icon-icon"></i>Node.js</li>
                <li><i class="icon iconfont icon-icon"></i>Canvas</li>
                <li><i class="icon iconfont icon-icon"></i>WebGL</li>
                <li><i class="icon iconfont icon-icon"></i>TailWindCSS</li>
              </ul>
            </div>
            <div class="box-item">
              <ul>
                <li><i class="icon iconfont icon-icon"></i>UniApp</li>
                <li><i class="icon iconfont icon-icon"></i>Webpack/Vite</li>
                <li><i class="icon iconfont icon-icon"></i>RESTful API</li>
                <li><i class="icon iconfont icon-icon"></i>Nuxt.js</li>
                <li><i class="icon iconfont icon-icon"></i>Mysql/MongoDB</li>
              </ul>
            </div>
            <div class="box-item">
              <ul>
                <li><i class="icon iconfont icon-icon"></i>PostgreSQL</li>
                <li><i class="icon iconfont icon-icon"></i>express</li>
                <li><i class="icon iconfont icon-icon"></i>AJAX</li>
                <li><i class="icon iconfont icon-icon"></i>CTRL+CV</li>
                <li><i class="icon iconfont icon-icon"></i>Koa</li>
              </ul>
            </div>
          </div>
          <div class="resume-box best-box">
            <div class="box-title">
              <span class="title-icon iconfont icon-zhuomian-diannaoxianshiqi">
              </span>
              <span class="text">Like... best</span>
            </div>
            <div class="box-item">
              <i class="icon icon-b iconfont icon-a-developer_outlineI"></i>
              <div class="best-text">每一行敲下的字都是一次探索</div>
            </div>
            <div class="box-item">
              <i class="icon icon-e iconfont icon-jordan"></i>
              <div class="best-text">有机会喜欢居家办公</div>
            </div>
            <div class="box-item">
              <i class="icon icon-d iconfont icon-lvyoufabu"></i>
              <div class="best-text">也喜欢旅游</div>
            </div>
          </div>
        </section>
        <section class="connect c-mt-40 c-mb-40" id="contact">
          <FanSectionHeader title="Contact Me" titleNum="05" />
          <p class="message-tips">留下足迹，让我知道你在这里看过我的留言板。</p>
          <div class="connect-box">
            <div class="contact-form">
              <FanForm @submitForm="submitMessage" />
            </div>

          </div>
        </section>
      </section>
      <WorldMap />

    </section>
  </section>
</template>

<script setup>
import {
  onMounted,
  onBeforeUnmount,
  nextTick,
  watch,
  reactive,
  ref
} from "vue";
// 照片墙
import ImgKarina from "../../components/common/Img-Karina.vue";
// 首页开屏动画
import Intro from "./components/intro.vue";

import { useMenusStore } from "../../stores/menus";


import WorldMap from "./components/world-map.vue";
import { notification } from 'ant-design-vue';
import lazyLoadImages from "../../libs/util.lazyLoad";
import observeAndAnimate from "../../libs/util.viewportObserve";
import FanSectionHeader from "../../components/common/FanSectionHeader.vue";
import FanForm from "../../components/common/FanForm.vue";



import setting from "../../setting";
import axios from "axios";
const city=ref('');
const getCity = async () => { 
  // 检查是否已经显示过城市提示
  const hasShownCityNotification = localStorage.getItem('hasShownCityNotification');
  
  if (hasShownCityNotification) {
    // 如果已经显示过，只更新城市值但不显示通知
    const res = await axios.get("https://api.vore.top/api/IPdata")
    if(res.data.code===200){
      city.value = res.data.ipdata.info2
    }
    return;
  }
  
  // 第一次访问，获取城市信息并显示通知
  const res = await axios.get("https://api.vore.top/api/IPdata")
  if(res.data.code===200){
    city.value = res.data.ipdata.info2
    notification.open({
        message: 'Hi',
        description: `欢迎${city.value}的朋友`,
        duration: 4, // 4秒后自动关闭
      });
    // 标记为已显示
    localStorage.setItem('hasShownCityNotification', 'true');
  }
  else{
    notification.open({
        message: 'Error',
        description: '获取城市失败',
        duration: 4,
      });
  }
}


onMounted(()=>{
  getCity()
})
const menusAction = useMenusStore();

const state = reactive({
  scrollHeight: 0,
  bannerWidth: 100,
  titleAnimation: false,
  textAnimation: false,
  show: {
    work: false,
  },
  viewData: {},
});
// 实现平滑滚动到锚点的方法
const scrollToSection1 = (id) => {
  const dom = document.getElementById(id);
  dom.scrollIntoView({ behavior: "smooth" });
};


import { submitContact } from "../../api/modules/api_contact";
const submitMessage = (form) => {
  submitContact(form).then((res) => {
    if (res.status===200) {
      notification.open({
        message: 'Success',
        description: '提交成功',
        duration: 4,
      });
      
      // 手动重置表单数据
      form.name = '';
      form.email = '';
      form.website = '';
      form.content = '';
    }
  });
}
watch(
  () => menusAction.page,
  (val) => {
    if (val) {
      scrollToSection1(val);
    }
  }
);

// 数据更新后使用 nextTick 来确保在 DOM 更新后执行 lazyLoadImages 方法
watch(
  () => state.portfoliosData,
  () => {
    nextTick(() => {
      lazyLoadImages();
    });
  }
);

const handleScroll = (e) => {
  // 滚动事件处理逻辑
  state.titleAnimation = window.scrollY - window.innerHeight / 2.2 > 0;
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);

  observeAndAnimate(".news-block-two", (element) => {
    // 自定义动画效果
    element.style.opacity = 1;
    element.style.transform = "translateX(0px)";
  });
  observeAndAnimate(".box-item", (element) => {
    // 自定义动画效果
    element.style.opacity = 1;
    element.style.transform = "translateY(0px)";
  });

  // 懒加载图片
  lazyLoadImages();
});
onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style lang="scss" scoped>
@import "style/index";
</style>
e>
